<template>
  <view>
    <view class="d-flex a-center j-sb py-2 px-3 text-light-muted">
      <view class="iconfont icon-shanchu1" @click="goBack"></view>
      <view class="font-md" @click="forget"> 忘记密码</view>
    </view>

    <view class="p-5">
      <text class="font-big mb-5">密码登录</text>
      <input type="text" class="border-bottom mb-4 uni-input px-0"
             placeholder="请输入手机号"
             v-model="username"
             placeholder-class="text-light-muted"
             @focus="focus('username')" @blur="blur('username')"
             :class="focusClass.username?'input-border-color':''"
      />
      <input type="password" class="border-bottom mb-4 uni-input px-0"
             placeholder="请输入密码"
             v-model="password"
             placeholder-class="text-light-muted"
             @focus="focus('password')" @blur="blur('password')"
             :class="focusClass.password?'input-border-color':''"
      />

      <view class="py-2 w-100 d-flex a-center j-center main-bg-color text-white rounded font-md mb-4 "
            hover-class="main-bg-hover-color" @click="submit">
        登录
      </view>

      <checkbox :checked="check" class="text-light-muted" @click="check=!check" checked="check">已阅读并同意XXXX协议</checkbox>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      check: true,
      focusClass: {
        username: false,
        password: false
      }
    }
  },
  methods: {
    goBack() {
      uni.showToast({
        icon: 'none',
        title: 'goBack'
      })
    },
    forget() {
      uni.showToast({
        icon: 'none',
        title: 'forget'
      })
    },
    submit() {
      var str = "submit:" + (this.check ? "已选中协议" : "未选中协议") + ',用户名:' + this.username
      uni.showToast({
        icon: 'none',
        title: str
      })
    },
    focus(key) {
      this.focusClass[key] = true
    },
    blur(key) {
      this.focusClass[key] = false
    }
  }
}
</script>

<style>

</style>
